<script setup>
import QuestionItem from './QuestionItem.vue';
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useUserStore } from '@/stores/useUserStore';
import useGetPaper from "./useGetPaper"
import * as studentApi from '@/api/studentApi'
import { deepClone } from '@/utils/tools';
import { ElMessage } from 'element-plus';
import BigModel from './BigModel/BigModel.vue';
import ModelAnalyze from './BigModel/ModelAnalyze.vue';
const userStore = useUserStore()
const { userRef } = userStore
import router from '@/router';

const routeConfig = useRoute();
// http://192.168.43.27:5173/exam/5e061551-dfd0-40d2-bb5c-c98ae1d18f9a


// 试卷的 Id
const exam_id = routeConfig.params.id
const testPaperRef = ref({ questions: [] })
useGetPaper(testPaperRef, exam_id)

const canSubmit = computed(() => {
  const unSelect = testPaperRef.value?.questions?.filter((item) => {

    return !item.answer
  })
  return unSelect.length === 0

})


// 题目 选项改变事件
function handleSelect(e) {
  const { id, answer, index } = e
  testPaperRef.value.questions[index].answer = answer
  testPaperRef.value.questions[index].isRight = answer === testPaperRef.value.questions[index].correct
}

// 总得分

// let count = 4
const sumScore = computed(() => {
  let count = 0
  for (const item of testPaperRef.value.questions) {
    if (item.isRight) {
      count += item.score
    } 
  }
  return count
})


//取得数据
  let correctNumber = ref(0)
  let AllTitle =0
  let MisTakeNumber = ref(0)
  let score = 0
  let CorretRate = 0
  let standardLine =0
function submitTwo(){
  for (const item of testPaperRef.value.questions) {
    
    if(true){
      score += item.score
    }

    if (item.isRight) {
      correctNumber.value++
    } 
  }

  AllTitle=testPaperRef.value.questions.length  
  MisTakeNumber.value=AllTitle-correctNumber.value
  CorretRate = correctNumber.value/AllTitle*100
  standardLine = score*0.6

console.log("总分",score);
console.log("正确的题目数：",correctNumber.value);
console.log("题目的总数",AllTitle);
console.log("题目错误的数量",MisTakeNumber.value);
console.log("正确率：",CorretRate);
console.log("及格线：",standardLine);
console.log("您的得分为：",sumScore.value);
}



// 提交试卷
async function handleSumbit() {
  const testPaper = deepClone(testPaperRef.value)

  const account_id = userRef.account
  testPaper.account_id = account_id
  testPaper.test_paper_id = testPaper.id;
  testPaper.answers = testPaper.questions

  // TODO 计算属性 一个ref 意味着需要 .value 获取
  testPaper.score = sumScore.value

  delete testPaper.id
  delete testPaper.start_time
  delete testPaper.stop_time
  delete testPaper.exam_time_long
  delete testPaper.questions

  const { code, msg } = await studentApi.createStudentPaper(testPaper)
  if (code === 2000) {
    submitTwo()
    ElMessage.success(msg)
    dialogVisible.value = true
  }


}

const dialogVisible = ref(false)

// 是否显示大模型
const visibleBigModel = ref(false)

function handleToHome() {
  router.push({ path: '/' })
}

</script>

<template>
  <div class='exam-container'>
    <!-- 题目渲染部分 -->
    <div>
      <template v-for="(question, index) in testPaperRef.questions" :key="question.id">
        <QuestionItem @select="handleSelect" :question="question" :index="index" />
      </template>

      <el-button type="primary" :disabled="!canSubmit" @click="handleSumbit">提交</el-button>
    </div>

   <!-- 考试的题目的正确和错误的题目数量   正确率  得分的数  是否及格-->
    <div>
      <!-- 显示考试结果部分 -->
      <el-dialog v-model="dialogVisible" title="成绩报告" width="40%">
        <span><h1>您的得分：{{ sumScore }}</h1></span>
        <template #footer>
         <span style="margin-left: 50px;"><h1>您的正确率为：{{CorretRate}}</h1></span>
        <span><h1>及格分为：{{ standardLine }}</h1></span>
          <span class="dialog-footer">
          <!--放入模型 -->
           <div style="margin-top: 50px;">
            <!-- 传值 -->
            <ModelAnalyze :correctNumber="correctNumber" 
            :MisTakeNumber="MisTakeNumber" ></ModelAnalyze></div>

            <el-button type="primary" @click="handleToHome">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>



    <!-- 大模型部分 -->
    <div class="big-model">
      <el-drawer :modal="false" v-model="visibleBigModel" :show-close="false" :lock-scroll="false"
        :close-on-click-modal="false">
        <template #header="{ close, titleId, titleClass }">
          <h4 :id="titleId" :class="titleClass">This is a Knowledge grand model</h4>
          <!-- 关闭按钮 -->
          <el-button type="danger" @click="close">
            <el-icon class="el-icon--left">
              <CircleCloseFilled />
            </el-icon>
            <!-- Close -->
          </el-button>
        </template>
        <!-- This is drawer content. -->
        <BigModel />
      </el-drawer>
    </div>

    
  </div>
</template>

<style scoped>
.exam-container {
  padding: 10px;
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
}
</style>